<template>
  <div>
    <div class="brandTitle">
      <span>品牌馆</span>
      <a href="/#/brandList">
        更多
        <van-icon name="arrow" />
      </a>
    </div>
    <div class="brand">
      <van-grid :border="false">
        <van-grid-item
          v-for="(item, index) in brandShowList"
          :key="item.id"
          :class="index > 6 && showFlag ? 'hidden' : ''"
        >
          <van-image :src="item.image_path" />
        </van-grid-item>
        <van-grid-item
          class="open"
          v-if="showFlag && brandShowList.length > 6"
          @click="showOpenBtn"
        >
          <van-icon name="arrow-down" />
        </van-grid-item>
        <van-grid-item
          class="open"
          v-if="!showFlag && brandShowList.length > 6"
          @click="showOffBtn"
        >
          <van-icon name="arrow-up" />
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 品牌数据
      brandShowList: [
        {
          id: 1,
          image_path: 'https://img.dangaoss.com/public/b/92/28/1204526_s.jpg'
        },
        {
          id: 2,
          image_path: 'https://img.dangaoss.com/public/b/95/18/1317884_s.jpg'
        },
        {
          id: 3,
          image_path: 'https://img.dangaoss.com/public/b/3/19/1165926_s.jpg'
        },
        {
          id: 4,
          image_path: 'https://img.dangaoss.com/public/b/75/30/1279749_s.jpg'
        },
        {
          id: 5,
          image_path: 'https://img.dangaoss.com/public/b/3/33/1279974_s.jpg'
        },
        {
          id: 6,
          image_path: 'https://img.dangaoss.com/public/b/13/13/1358986_s.jpg'
        },
        {
          id: 7,
          image_path: 'https://img.dangaoss.com/public/b/95/13/1279769_s.jpg'
        },
        {
          id: 8,
          image_path: 'https://img.dangaoss.com/public/b/78/12/1280841_s.jpg'
        },
        {
          id: 9,
          image_path: 'https://img.dangaoss.com/public/b/85/23/1344307_s.jpg'
        },
        {
          id: 10,
          image_path: 'https://img.dangaoss.com/public/b/41/28/1318523_s.jpg'
        },
        {
          id: 11,
          image_path: 'https://img.dangaoss.com/public/b/58/34/1348240_s.jpg'
        }
      ],
      // 品牌显示隐藏标杆
      showFlag: true
    }
  },
  methods: {
    // 点击打开
    showOpenBtn() {
      this.showFlag = false
    },
    // 点击关闭
    showOffBtn() {
      this.showFlag = true
    }
  }
}
</script>

<style lang="less" scoped>
.hidden {
  display: none;
}
.brandTitle {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0.3rem 0.24rem;
  background: #fff;
  span {
    font-size: 0.3rem;
  }
  a {
    color: #666;
    font-size: 0.24rem;
    display: flex;
    .van-icon {
      color: #999;
      font-size: 0.2rem;
    }
  }
}
.brand {
  background: #fff;
  padding: 0 0.3rem 0.3rem;
  .open {
    /deep/.van-grid-item__content {
      background: #f6f6f6;
      width: 1.5rem;
      height: 1.5rem;
    }
    .van-icon {
      font-size: 0.6rem;
      color: #999;
    }
  }
  /deep/.van-grid-item__content {
    padding: 0;
    margin-bottom: 0.2rem;
  }
  /deep/.van-image__img {
    width: 1.5rem;
    height: 1.5rem;
  }
}
</style>
